import React,{ Component } from "react";

export default class Hello extends Component {
    constructor(props) {  // 就是 解决 this = undefined 的
        super(props)
        this.handler = this.handler.bind(this)
    }
    // 事件处理程序定义形式一：
    handler() {
        // 如果类中 定义 的是一个普通函数，那么这个普通函数的 this 就是 undefined。
        console.log("this", this);
        /**
         * 如果是一个 DOM，DOM上面的事件上的this指的是当前那个DOM，button不是一个真是的 DOM ，虚拟DOM是一个对象模型，所以里面的 this 是 undefined
         */
    }
    render() {
        return (
            <div>
                {/* 这里面的 this 指的是类里面实例化后的实例，这个实例就是组件实例 */}
                <button onClick={this.handler}> 普通事件 </button>
                <button onClick={this.handler.bind(this)}> 普通事件bind </button>
            </div>
        )
    }
}

/**
 * 事件
 *   构成部分
 *     1. 事件源
 *     2. 事件类型  click/keydown/...
 *     3. 事件处理程序
 *    事件数据部分
 *      参数
 *          实参
 *          形参
 *      事件对象
 */